<template>
  <div class="usermanager_box">
    <div class="table_box">
    <el-input v-model="word" placeholder="请输入内容"></el-input>
      <el-button icon="el-icon-search" circle @click="searchWord()"></el-button>
        <el-button type="primary" @click="getAll()">查看全部</el-button>
       <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="单词编号"
          width="80">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.wordId }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          label="单词"
          width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.english }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          label="中文释义"
          width="140">
          <template slot-scope="scope">
            <i class="el-icon-time" style="cursor: pointer;"></i>
            <span style="margin-left: 10px">{{ scope.row.chinese }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="词性"
          width="80">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.property }}</span>
          </template>
        </el-table-column>
         <el-table-column
          label="例句"
          width="250"
           :show-overflow-tooltip="true">
          <template slot-scope="scope">
               <span style="margin-left: 10px">{{ scope.row.example }}</span>
          </template>
        </el-table-column>
           <el-table-column
          label="修改"
          width="100">
          <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" @click="modifyWord(scope.row.wordId)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :total="len"
          :page-size='5'>
        </el-pagination>
      </div>
    </div>
  </div>  
</template>

<script>
import {getWord} from '@/api/api'
export default {
  data(){
    return{
      userid:'',
      tableData: [ ],
      flag:3,
      pageNum:1,
      pageSize:5,
      word:'',
      len:0,
    }
  },
  created(){
     const data2 = {
      pageNum:'',
      pageSize:'',
      word:''
    }
    getWord(data2).then((response) => {
      const data3 = response.data
      console.log(data3,'data3')
      this.len=data3.length
      console.log(this.len,'len')
      })
    const data = {
      pageNum:this.pageNum,
      pageSize:this.pageSize,
      word:this.word
    }
    getWord(data).then((response) => {
      console.log(getWord)
      console.log(response)
         this.tableData=response.data
      })
  },
  methods:{
   handleCurrentChange(val){
    console.log(val)
      const data = {
      pageNum:val,
      pageSize:this.pageSize,
      word:this.word
    }
    getWord(data).then((response) => {
      console.log(getWord)
      console.log(response)
         this.tableData=response.data
      })
   },
   searchWord(){
    if(this.word){
      const searchData = {
      pageNum:'',
      pageSize:'',
      word:this.word
    }
    getWord(searchData).then((response) => {
      this.tableData=response.data.record
      this.len = this.tableData.length
      })

    }
      
   },
   getAll(){
      location.reload()
   },
   modifyWord(id){
      localStorage.setItem('wordId',id)
      this.$router.push({
        name:'ModifyWord' ,
        params:{
          wordId:id
        }
      })
   }
  }
}
</script>

<style>
.page{
  margin-top: 10px;
}
.block2{
  margin-top: 2vw;
}
.table_box{
  margin: 0 auto;
  height: 65vh;
  overflow-y: scroll;
  
}
.el-pagination{
  margin-left: 35vw!important;
}
.search_content{
  margin-top: 3vh;
}
.el-button{
  margin-right: 2vw!important;
}
.button_box{
  margin-top: 3vh;
}
.num{
  width: 7vw;
}
.block{

  margin-left: 2vw;
}
.el-color-picker__icon, .el-input, .el-textarea {
  width: 47%!important;
}
.el-input__inner{
  width: 65%!important;
}
.el-date-editor--daterange{
  width: 100%!important;
}
.search_content{
  display: flex;
  align-items: center;
  text-align: center;
}
.usermanager_box{
  height: 75vh;
}
.usermanager_box_title{
  color: #000;
}
</style>